<script setup>
import {usePreviewInfoStore} from "@/stores/previewInfoStore.js";
import * as fileApi from "@/api/fileApi.js"
import multipleFiles from "@/assets/multipleFiles.png"

const previewInfoStore = usePreviewInfoStore();

</script>

<template>
  <el-dialog
      v-model="previewInfoStore.show"
      @close="previewInfoStore.clear"
      :close-on-press-escape="true"
      :title="previewInfoStore.title"
  >
    <div>
      <div>
        <div><el-image draggable="false" style="width: 50px; height: 50px" fit="contain" :src="previewInfoStore.icon !== null ? fileApi.icon(previewInfoStore.icon) : multipleFiles"/></div>
        <div><span>{{previewInfoStore.fileInfo.name}}</span></div>
      </div>
      <div>
        <span>{{previewInfoStore.fileInfo.sizeStr}}</span>
      </div>
    </div>
  </el-dialog>
</template>

<style scoped>

</style>